<template>
	<view class="item">
		<!-- 消息 -->
		<view v-if="type=='message'" class="list-item">
			<image :src="content.user_info_to.upload_avatar ? content.user_info_to.upload_avatar.path_text	 : '/static/home/default_user.png' " class="face" mode="aspectFill" @click="jumpPersonalCenter(content.to_user_id)"></image>
			<view class="item-info"  @click="toChatRoom">
				<view class="item-left">
					<view class="name">{{content.user_info_to.nickname}}</view>
					<view class="content">{{content.content}}</view>
				</view>
				<view class="item-right">
					<view class="item-tips">
						<view class="right-time">{{content.timeText}}</view>
						<view class="unread-count" v-if="content.unread_count > 0">
							<view v-show="content.unread_count <= 9" class="unread-text">{{content.unread_count}}</view>
							<image v-show="content.unread_count > 9" src="/static/message/tips.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 粉丝 -->
		<view v-else-if="type=='fans'" class="list-item">
			<image :src="content.user_info.upload_avatar ? content.user_info.upload_avatar.path_text : '/static/home/default_user.png' " class="face" mode="aspectFill" @click="jumpPersonalCenter(content.user_id)"></image>
			<view class="item-info"  @click="handleClick">
				<view class="item-left">
					<view class="name">{{content.user_info.nickname}}</view>
					<view class="content">关注了你</view>
					<view class="left-time">{{content.created_at}}</view>
				</view>
				<view class="item-right">
					<view v-show="isFollow" class="cancelFollow"  @click="handleFollowOptions(content.user_id, false)">
						互相关注
					</view>
					<view v-show="!isFollow" class="follow"  @click="handleFollowOptions(content.user_id, true)">
						关注
					</view>
				</view>
			</view>
		</view>
		<!-- 点赞 -->
		<view v-else-if="type=='fabulous'" class="list-item">
			<image :src="content.upload_avatar ? content.upload_avatar.path_text : '/static/home/default_user.png'" class="face" mode="aspectFill" @click="jumpPersonalCenter(content.user_id)"></image>
			<view class="item-info"  @click="handleClick">
				<view class="item-left">
					<view class="name">{{content.user_info.nickname}}</view>
					<view class="content">赞了你的作品</view>
					<view class="left-time">{{content.created_at}}</view>
				</view>
				<view class="item-right">
					<image :src="content.user_work.upload_work_cover.path_text" mode="aspectFill" @click="jumpVideoItem(content.user_work.user_id, 'fabulous')"></image>
				</view>
			</view>
		</view>
		<!-- 评论 -->
		<view v-else-if="type=='comment'" class="list-item">
			<image :src="content.upload_avatar ? content.upload_avatar.path_text : '/static/home/default_user.png' " class="face" mode="aspectFill" @click="jumpPersonalCenter(content.user_id)"></image>
			<view class="item-info"  @click="handleClick">
				<view class="item-left">
					<view class="name">{{content.user_info.nickname}}</view>
					<view class="content">{{content.content}}</view>
					<view class="left-time">{{content.created_at}}</view>
				</view>
				<view class="item-right">
					<image :src="content.user_work.upload_work_cover.path_text" mode="aspectFill" @click="jumpVideoItem(content.user_work_id, 'comment')"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { apiFollow, apiCancelFollow } from '@/api/message'
	export default {
		props: {
			type: {
				type: String,
				required: true
			},
			content: {
				type: Object,
				required: true
			},
			indexKey: {
				type: Number,
				required: false
			},
			propPage: {
				type: [String,Number],
				default: ''
			},
			propPageSize: {
				type: [String,Number],
				default: ''
			}
		},
		data() {
			return {
				clickIntervalLock: false,
				requestLock: false,
				isFollow: this.content.user_info ? (this.content.user_info.user_fans_to_user_id ? true : false) : false
			}
		},
		watch: {
			'content.user_info': {
				handler(val) {
					this.isFollow = val ? (val.user_fans_to_user_id ? true : false) : false
				},
				deep: true
			}
		},
		methods: {
			toChatRoom() {
				this.$navTo.togo('/pages/message/chatRoom?userName=' + this.content.user_info_to.nickname + '&id=' + this.content.to_user_id)
			},
			jumpPersonalCenter(userId) {
				
				if(userId == uni.getStorageSync('userinfo').id){
					uni.switchTab({
						url:'/pages/me/me'
					})
					return
				}
				this.$navTo.togo('/pages/glob/user/index?userId=' + userId)
			},
			jumpVideoItem(id, type) {
				let data = {
					videoType: type=='comment' ? 'commentSearch' : 'fabulousSearch',
					page: this.propPage,
					pageSize: this.propPageSize,
					videoIndex: this.indexKey
				}
				this.$navTo.togo('/pages/glob/video/index', data)
			},
			handleClick() {
				this.$emit('handleMessageClick')
			},
			handleFollowOptions(userId, follow) {
				if(this.clickIntervalLock) {
					return 
				}
				// 点击间隔锁
				this.clickIntervalLock = true
				setTimeout( () => {
					this.clickIntervalLock = false
				}, 300)
				
				// 请求锁
				if(this.requestLock) {
					return
				}
				this.requestLock = true
				if(follow) {
					apiFollow({
						to_user_id: userId
					}).then( res => {
						this.isFollow = true
						this.requestLock = false
					}).catch( err => {
						this.requestLock = false
					})
				} else {
					apiCancelFollow({
						to_user_id: userId
					}).then( res => {
						this.isFollow = false
						this.requestLock = false
					}).catch( err => {
						this.requestLock = false
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		width: 100%;
		background-color: #0C0B18;
	}
	.list-item {
		height: 110rpx;
		padding: 0 24rpx;
		color: #DDDBFB;
		background-color: #0C0B18;
		display: flex;
		align-items: center;

		.face {
			height: 100rpx;
			width: 100rpx;
			border-radius: 50%;
			margin-right: 32rpx;
		}

		.item-info {
			flex: 1;
			height: 100%;
			line-height: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.item-left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 384rpx;
			
			.name {
				font-size: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				margin-bottom: 18rpx;
				&:last-child {
					margin-bottom: 0;
				}
			}

			.content {
				height: 24rpx;
				line-height: 24rpx;
				font-size: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-bottom: 12rpx;
				&:last-child {
					margin-bottom: 0;
				}
			}

			.left-time {
				height: 24rpx;
				line-height: 24rpx;
				color: #747384;
				font-size: 24rpx;
			}
		}

		.item-right {
			&>image {
				height: 110rpx;
				width: 110rpx;
			}
			
			.item-tips {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-end;

				.right-time {
					font-size: 24rpx;
					color: #747384;
					margin-bottom: 18rpx;
					height: 24rpx;
					line-height: 100%;
				}
				
				.unread-count {
					.unread-text {
						width: 32rpx;
						height: 32rpx;
						background-color: #E62D54;
						border-radius: 50%;
						text-align: center;
						line-height: 32rpx;
						font-size: 22rpx;
						color: #fff;
					}
					
					&>image {
						height: 32rpx;
						width: 32rpx;
					}
				}
			}
			
			.follow,.cancelFollow {
				height: 60rpx;
				width: 140rpx;
				line-height: 60rpx;
				border-radius:4px;
				font-size: 24rpx;
				text-align: center;
				letter-spacing:1px
			}
			.follow {
				background: linear-gradient(22deg, #863B8D 0%, #F01332 100%);
			}
			.cancelFollow {
				background-color: #434254;
			}
		}

	}
</style>
